<template>
	<view id="achievement">
		<view class="u-navbar">
			<view class="u-back-icon"  @click="goBack">
				<my-icon name="back"  size="28upx" style="color: #fff;"></my-icon>
			</view>
			<view class="u-navbar-content-title">
				<view  class="u-title u-line-1">学生详情</view>
				<view class="srot" @click="dropShow=!dropShow">筛选</view>
			</view>
			<view class="srotDrown" v-if="dropShow">
				<view :class="[dropChose==index?'cur':'']" @click="dropListClick(index,item.type)" v-for="(item,index) in dropList" :key="index">{{item.name}}</view>
			</view>
		</view>
	  <view class="stuTop">
			<view class="stuTopInfo">
				<image class="infoImg" :src="stuInfo.avatar"></image>
				<view class="topInfo">
					<view class="infoTit">{{stuInfo.username}}</view>
					<view class="infoNode"><view>最高分<text>{{stuInfo.highestscore}}</text></view><view>最低分<text>{{stuInfo.lowestscore}}</text></view></view>
				</view>
			</view>
			<!-- 详情头部 -->
			<view class="detailTop">
				<view class="detailTopView">
					<view>{{stuInfo.average}}</view>
					<text>平均分</text>
				</view>
				<view class="detailTopView">
					<view>{{stuInfo.passcount}}</view>
					<text>及格次数</text>
				</view>
				<view class="detailTopView">
					<view>{{stuInfo.counts}}</view>
					<text>考试总数</text>
				</view>
			</view>
		</view>
		<!-- 考试列表 -->
			<view class="examListTit">考试列表</view>
			<view class="examList">
			 <my-an-item v-for="(paper,index) in list"  :key="index"  :itemName="paper.examid == null? paper.papername : paper.examname"  @click.native="gotoLink(paper.paperid)">
			 	<view slot="botLeft">
			 		<my-icon name="time"></my-icon>
			 		<text class="botTxt">交卷时间：{{ paper.endtime }}</text>
			 	</view>
				<view slot="right" class="ft32" :class="[paper.score<60?'org':'gre']">
					{{paper.score}}分
				</view>
			 </my-an-item>
			 <my-empty v-if="empyFalse" emptyTit="暂无考试"></my-empty>
	  	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stuInfo:{},
				list:[],
				pageNo:1,//页码
				isLastPage: false, //是否最后一页
				status: 'loadmore',
				userid:'',
				dropShow:false,//下拉筛选
				dropList:[{name:'全部',type:0},{name:'近一个月',type:-1},{name:'近三个月',type:-3},{name:'近六个月',type:-6}],
				dropChose:0,//默认选择第一个
				type:0,//全部
        styles: 2,
				empyFalse:false
			}
		},
		onLoad(option){
			this.userid=option.userId;
			this.detailType=option.type;
			this.styles=parseInt(option.styles) ;
			this.init()
		},
		computed:{
			lastItem(){
			  return function (value) {
					 if(value){
						return  '交卷时间：'+value
					 }
			     
			  }
			}
		},
		onReachBottom() {
			!this.isLastPage && this.getInfo();
		},
		methods: {
			init(){
				this.pageNo=1;
				this.list=[]
				this.dropChose=0;
				return this.getInfo();
			},
			dropListClick(index,type){
				this.list=[]
				this.dropShow=false;
				this.dropChose=index;
				this.type=type;
				this.pageNo=1;
				this.getInfo()
			},
			getInfo(){
				const pageData={
					pageNo:this.pageNo,
					styles:this.styles,
					userid:this.userid,
					type:this.type
				}
				return new Promise((resolve, reject) => {
					Promise.all([
						this.request.get(`/app/teacher/paperanalysis/getStudentDetails/${this.userid}/${this.detailType}`),
						this.request.post('/app/teacher/paperanalysis/getstudentPaperList',pageData)
					])
						.then(res => {
						//模拟考试
						this.stuInfo=res[0]
						console.log(this.stuInfo)
					 	this.list=this.list.concat(res[1].list)
						this.empyFalse=this.list.length>0?false:true
						this.isLastPage = res[1].isLastPage;
						if (res[1].isLastPage) this.status = 'nomore';
						else this.pageNo++;
							resolve();
						})
				});
			},
			// 返回
			goBack(){
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hover:active{
		background: none;
	}
	#achievement {
		width: 100%;
		height: 100%;
		background: url(../../static/online/stu_bg.png) no-repeat;
		background-size: 100% auto;
		.u-title{ color:#fff; text-align: center; font-size:32upx}
		.u-navbar{background: none!important; height:44px; line-height: 44px;padding-top: 40upx;}
		.u-back-icon{ position: absolute; padding: 0 30upx; z-index: 50;}
	}
	.u-navbar-content-title{ position: relative;}
	.srot{
		position: absolute;
		right: 30upx;
		top: 0;
		color: #fff;
		font-size: 30upx;
		z-index: 100;
		font-weight: normal;
	}
	.srotDrown::before{
		content: '';
		display:block;
		width: 0;
		height: 0;
		border-left: 20upx solid transparent;
		border-right: 20upx solid transparent;
		border-bottom: 20upx solid #fff;
		margin-top: -12upx;
		float: right;
		right: 10upx;
		position: absolute;
	}
	.srotDrown{
		background: #fff;
		position: absolute;
		right: 30upx;
		width: 230upx;
		height: 308upx;
		text-align: center;
		border-radius: 14upx;
		box-shadow: 0px 4upx 16upx 0px rgba(0,0,0,0.1); 
		font-weight: normal;
		.cur{ color:#E65A4B;font-weight: 600;}
		view{
			margin: 0 15upx;
			width: 200upx;
			color: #363940;
			height: 78upx;
			font-size: 30upx;
			line-height: 78upx;
			border-bottom: 1px solid #EBEBEB;
			display: flex;
			justify-content: center;
		}
		view:nth-child(4){
			border-bottom: none;
		}
	}
	.stuTop{
		margin-top: 20upx;
		height: 350upx;
	}

	.empty {
		height: 65%;
		top: auto;
		bottom: 0;
	}
	.stuTopInfo{
		display: flex;
		justify-content: start;
		padding: 40upx 40upx 20upx;
		.infoImg{
			width: 92upx;
			height: 92upx;
			margin-right: 20upx;
			border-radius: 100upx;
		}
		.topInfo{
			width: 500upx;
			color: #fff;
			.infoTit{
				font-size: 34upx;
				font-weight: 600;
			}
			.infoNode{
				font-size: 28upx;
				color:#D6E2FF ;
				display: flex;
				justify-content: start;
				view{
					margin-right: 45upx;
					display: flex;
					align-items: center;
				}
				text{
					color: #fff;
					font-size: 36upx;
					margin-left: 8upx;
					font-weight: 600;
				}
			}
		}
	}
	/deep/.name{
		.content{
			width: 85%;
		}
	}
	.paper-item{
		position: relative;
		.ft32{
			position: absolute;
			right: 0;
			margin-top: 32upx;
			margin-right: 35upx;
		}
	}
	.detailTop {
		display: flex;
		justify-content: start;
		margin-top: 10upx;
		padding-left: 11%;
		.detailTopView {
			width: 33%;
			text-align: center;
			view {
				color: #ffd200;
				font-weight: 600;
				font-size: 52upx;
				margin-bottom: 15upx;
			}
			text {
				font-size:32upx;
				color: #FFF;
			}
		}
	}
	.examListTit{
		padding: 0 30upx;
		color: #363940;
		font-size: 32upx;
		font-weight: 600;
		display: flex;
		justify-content: start;
		align-items: center;
		height: 112upx;
		border-bottom: 1px solid #EBEBEB;
	}
	.examListTit::before{
		content: '';
		display:block;
		width: 8upx;
		height: 30upx;
		border-radius: 10upx;
		background: linear-gradient(to bottom,#FC7767,#EC412F);
		margin-right: 20upx;
	}
</style>
